<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>用户管理</el-breadcrumb-item>
			<el-breadcrumb-item>用户列表</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片视图区域 -->
		<el-card class="box-card">
			<!-- 搜索与添加区域 -->
			<el-row :gutter="20">
				<el-col :span="8">
					<el-input placeholder="请输入内容" class="input-with-select" v-model="queryInfo.query" clearable @clear="getUsersList">
						<el-button slot="append" icon="el-icon-search" @click="getUsersList"></el-button>
					</el-input>
				</el-col>
				<el-col :span="4"><el-button type="primary" @click="addDialogVisible = true">添加用户</el-button></el-col>
			</el-row>

			<!-- 用户信息区域 -->
			<el-table :data="usersList" style="width: 100%" border stripe>
				<el-table-column type="index"></el-table-column>
				<el-table-column prop="username" label="username" width="180"></el-table-column>
				<el-table-column prop="email" label="邮箱" width="180"></el-table-column>
				<el-table-column prop="mobile" label="电话"></el-table-column>
				<el-table-column prop="role_name" label="角色"></el-table-column>
				<el-table-column prop="mg_state" label="状态">
					<!-- 通过插槽接收数据 -->
					<template v-slot="scope">
						<!-- {{scope.row}} -->
						<el-switch v-model="scope.row.mg_state" @change="userStateChanged(scope.row)"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="180px">
					<template v-slot="scope">
						<!-- 修改按钮 -->
						<el-button type="primary" icon="el-icon-edit" size="mini" @click="exitDialog(scope.row.id)"></el-button>
						<!-- 删除按钮 -->
						<el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserById(scope.row.id)"></el-button>
						<!-- 分配角色按钮 -->
						<el-tooltip effect="dark" content="分配角色" placement="top" :enterable="false">
							<el-button type="warning" icon="el-icon-setting" size="mini" @click="userInfoClick(scope.row)"></el-button>
						</el-tooltip>
					</template>
				</el-table-column>
			</el-table>

			<!-- 分页区域 -->
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="queryInfo.pagenum"
				:page-sizes="[1, 2, 5, 10]"
				:page-size="queryInfo.pagesize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
			></el-pagination>
		</el-card>

		<!-- 添加用户对话框 -->
		<el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%"  @close="addDialogClose">
			<!-- 表单区域 -->
			<el-form :model="addForm" :rules="addFormRules" ref="addFormRel" label-width="70px">
				<el-form-item label="用户名" prop="username"><el-input v-model="addForm.username"></el-input></el-form-item>
				<el-form-item label="密码" prop="password"><el-input v-model="addForm.password"></el-input></el-form-item>
				<el-form-item label="邮箱" prop="email"><el-input v-model="addForm.email"></el-input></el-form-item>
				<el-form-item label="手机号" prop="mobile"><el-input v-model="addForm.mobile"></el-input></el-form-item>
			</el-form>
			<!-- 底部区域 -->
			<span slot="footer" class="dialog-footer">
				<el-button @click="addDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="addUser">确 定</el-button>
			</span>
		</el-dialog>
		
		<!-- 编辑用户对话框 -->
		<el-dialog title="添加用户" :visible.sync="exitDialogVisible" width="50%" @close="editDialogClose">
			<!-- 表单区域 -->
			<el-form :model="editForm" :rules="editFormRules" ref="editFormRel" label-width="70px">
				<el-form-item label="用户名"><el-input v-model="editForm.username" disabled></el-input></el-form-item>
				<el-form-item label="邮箱" prop="email"><el-input v-model="editForm.email"></el-input></el-form-item>
				<el-form-item label="手机号" prop="mobile"><el-input v-model="editForm.mobile"></el-input></el-form-item>
			</el-form>
			<!-- 底部区域 -->
			<span slot="footer" class="dialog-footer">
				<el-button @click="exitDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="editUserInfo">确 定</el-button>
			</span>
		</el-dialog>
		
		<!-- 分配角色 对话框 -->
		<el-dialog
		  title="分配角色"
		  :visible.sync="UsersdialogVisible"
		  width="50%"
		  @close="setRoleDialogClosed">
		  <div>
				<p>当前的用户：{{userInfo.username}}</p>
				<p>当前的角色：{{userInfo.role_name}}</p>
				<p>分配新的角色：
					 <el-select v-model="selectedRoleId" placeholder="请选择">
					    <el-option
					      v-for="item in userInfoList"
					      :key="item.id"
					      :label="item.roleName"
					      :value="item.id">
					    </el-option>
					  </el-select>
				</p>
			</div>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="UsersdialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="saveRoleInfo">确 定</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	name: 'Users',
	data() {
		//验证手机号的合法规则
		var checkMobile = (rule,value,cb) => {
			//验证手机号的正则表达式
			const regMobile = /^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
			// 判断用户输入的值与value的值是否匹配
			if (regMobile.test(value)) {
				// 匹配则直接返回
				return cb()
			}
			// 不匹配则提示用户
			cb(new Error('请输入合法的手机号'))
		}
		return {
			//获取用户列表的参数对象
			queryInfo: {
				query: '',
				//当前的页数
				pagenum: 1,
				//当前每页显示多少条数据
				pagesize: 2
			},
			usersList: [],
			total: 0,
			//控制添加用户对话框的显示与隐藏
			addDialogVisible: false,
			// 添加信息
			addForm: {
				username: '',
				password: '',
				email: '',
				mobile: ''
			},
			// 验证规则
			addFormRules: {
				username: [
					{ required: true, message: '请输入用户名', trigger: 'blur' }, 
					{ min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },
				],
				password: [
					{ required: true, message: '请输入密码', trigger: 'blur' }, 
					{ min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' },
				],
				email:[
					{ required: true, message: '请输入邮箱', trigger: 'blur' }, 
					{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']},
				],
				mobile:[
					{ required: true, message: '请输入手机号', trigger: 'blur' }, 
					{validator:checkMobile,trigger: 'blur'}
				],
			},
			//编辑用户对话框
			exitDialogVisible:false,
			//查询到的用户信息对象
			editForm:{},
			//验证编辑用户信息的验证规则
			editFormRules:{
				email:[
					{ required: true, message: '请输入邮箱', trigger: 'blur' }, 
					{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']},
				],
				mobile:[
					{ required: true, message: '请输入手机号', trigger: 'blur' }, 
					{validator:checkMobile,trigger: 'blur'}
				],
			},
			//分配角色对话框
			UsersdialogVisible:false,
			//
			userInfo:{},
			//保存获取到的角色权限
			userInfoList:[],
			//已选中的角色id值
			selectedRoleId:'',
			
		};
	},
	created() {
		this.getUsersList();
	},
	methods: {
		async getUsersList() {
			const { data: res } = await this.$http.get('users', { params: this.queryInfo });
			if (res.meta.status !== 200) {
				this.$message.error('获取用户列表失败');
			}
			this.usersList = res.data.users;
			this.total = res.data.total;
			// console.log(res);
		},
		// 监听pageSize的事件
		handleSizeChange(newSize) {
			// console.log(newSize)
			this.queryInfo.pagesize = newSize;
			this.getUsersList();
		},
		//监听pageNum的事件
		handleCurrentChange(newNum) {
			// console.log(newNum)
			this.queryInfo.pagenum = newNum;
			this.getUsersList();
		},
		//修改用户列表状态
		async userStateChanged(userinfo) {
			// console.log(userinfo)
			const { data: res } = await this.$http.put(`users/${userinfo.id}/state/${userinfo.mg_state}`);
			// console.log(res)
			if (res.meta.status !== 200) {
				// 如果更新失败，要立即将他进行还原
				userinfo.mg_state = !userinfo.mg_state;
				this.$message.error('更新用户列表失败');
			}
			this.$message.success('更新用户列表成功');
		},
		// 监听添加用户列表关闭事件
		addDialogClose(){
			this.$refs.addFormRel.resetFields()
		},
		// 监听添加效验表单
		addUser(){
			this.$refs.addFormRel.validate(async valid => {
				console.log(valid)
				if (!valid) return
				 //可以发起添加用户的网络请求
				const {data:res} = await this.$http.post('users',this.addForm)
				if(res.meta.status !== 201) return this.$message.error('添加用户失败')
				this.$message.success("添加用户成功")
				//隐藏添加用户对话框
				this.addDialogVisible = false;
				this.getUsersList();
			})
		},
		//监听编辑用户对话框
		async exitDialog(id){
			const {data:res} = await this.$http.get('users/' + id)
			if (res.meta.status !== 200) return this.$message.error('查询用户信息失败！')
			this.editForm = res.data
			// console.log(id)
			 this.exitDialogVisible = true
		},
		// 监听编辑用户列表关闭事件
		editDialogClose(){
			this.$refs.editFormRel.resetFields()
		},
		//修改用户信息并提交
		 editUserInfo(){
			 this.$refs.editFormRel.validate(async valid => {
				// console.log(valid)
				if(!valid) return
				//发起修改用户信息的请求
			  const { data : res } = await this.$http.put(
							'users/' + this.editForm.id,
							{ 
								email:this.editForm.email,
								mobile:this.editForm.mobile,
							}
						)
				if (res.meta.status !== 200) return this.$message.error('修改用户列表失败')
				 this.exitDialogVisible = false;
				 this.getUsersList()
				 this.$message.success("修改用户列表成功")
				 
			})
		},
		//删除用户
		async removeUserById(id){
			// console.log(id)
			const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err => err)
				
			//如果用户确认删除，则返回值为字符串 confirm
			//如果用户取消了删除，则返回值为字符串 cancel
			// console.log(confirmResult)
			if (confirmResult !== 'confirm') {
				return this.$message.info("已取消删除！")
			}
			// console.log("确认了删除")
			//删除网络请求
		 	const {data:res} =  await this.$http.delete('users/' + id)
			if (res.meta.status !== 200) {
				this.$message.error("删除失败！")
			}else{
				this.$message.success("删除成功！")
			}
			
			this.getUsersList();
		},
		//分配角色对话框
		async userInfoClick(userInfo){
			this.userInfo = userInfo
			
			this.UsersdialogVisible = true
			
			 const {data:res} = await this.$http.get("roles")
			if(res.meta.status !== 200) return this.$message.error("获取角色权限失败")
			this.$message.success("获取角色权限成功")
			this.userInfoList = res.data
		},
		//点击按钮，分配角色
		async saveRoleInfo(){
			if(!this.selectedRoleId) return this.$message.error("请选择要分配的角色")
			
		 	const {data:res} = await this.$http.put(`users/${this.userInfo.id}/role`,{rid:this.selectedRoleId})
			if(res.meta.status !== 200) return this.$message.error("分配角色失败")
			this.$message.success("分配角色成功")
			this.getUsersList()
			this.UsersdialogVisible = false
		},
		//监听分配角色对话框的关闭事件
		setRoleDialogClosed(){
			this.selectedRoleId = ''
			this.userInfo = {}
		}
		
	}
};
</script>

<style scoped="scoped" lang="less">
.el-breadcrumb {
	font-size: 12px;
}
.el-card {
	margin-top: 20px;
}
</style>

